<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="设备名称">
                <el-input v-model="formInline.equipmentName"></el-input>
            </el-form-item>
            <el-form-item label="设备类型">
                <el-select v-model="formInline.deviceTypeId" placeholder="请选择">
                    <el-option label="请选择" :value="0"></el-option>
                    <el-option v-for="item in data" :key="item.id" :label="item.typeName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="维护日期">
                <el-date-picker v-model="formInline.startTime" type="datetime" placeholder="开始时间">
                </el-date-picker>
                <span>-</span>
                <el-date-picker v-model="formInline.endTime" type="datetime" placeholder="结束时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getequipmentledger">查询</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="序号" width="100">
            </el-table-column>
            <el-table-column prop="equipmentCoding" label="设备编码" width="120">
            </el-table-column>
            <el-table-column prop="equipmentName" label="设备名称" width="100">
            </el-table-column>
            <el-table-column label="设备类型" width="120">
                <template slot-scope="scope">
                    <div>{{ scope.row.typeName }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="startTime" label="维护提醒日期" width="120">
            </el-table-column>
            <el-table-column prop="mainteDepartId" label="维护部门" width="120">
            </el-table-column>
            <el-table-column prop="personnelId" label="维护人员" width="120">
            </el-table-column>
            <el-table-column label="状态" width="120">
                <template slot-scope="scope">
                    <div style="color: green;" v-if="scope.row.state == true">已维护</div>
                    <div style="color: red;" v-else>未维护</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button type="text" @click="ShowChaKan(scope.row)">查看</el-button>
                    <el-button v-if="scope.row.state == false" type="text"
                        @click="putequipmentstart(scope.row)">维护登记</el-button>
                    <el-button v-else type="text" @click="ShowLiShi(scope.row)">历史记录</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formInline.pageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="count">
        </el-pagination>


        <el-dialog title="维护登记" :visible.sync="dialogFormVisible">
            <el-form :model="value">
                <el-form-item label="设备编号" :label-width="formLabelWidth">
                    <el-input :disabled="true" v-model="formData.equipmentCoding" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="设备名称" :label-width="formLabelWidth">
                    <el-input :disabled="true" v-model="formData.equipmentName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="设备类型" :label-width="formLabelWidth">
                    <el-input :disabled="true" v-model="formData.typeName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="维护登记" :label-width="formLabelWidth">
                    <el-input v-model="value.remark" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="putstart">保存</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="历史记录" :visible.sync="dialogLiShiVisible">
            <el-table :data="value">
                <el-table-column property="id" label="序号" width="150"></el-table-column>
                <el-table-column property="startTime" label="维护提醒日期" width="200"></el-table-column>
                <el-table-column property="createDate" label="维护登记日期"></el-table-column>
                <el-table-column property="personnelId" label="维护人员"></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogLiShiVisible = false">关闭</el-button>
            </div>
        </el-dialog>

        <el-dialog title="详情" :visible.sync="dialogLiShiVisible">
            <div>
                
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogLiShiVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getequipmentledgerapi, putequipmentledgerstartapi, getequipmentledgerinfoapi } from "@/api/assetManage/EquipmentLedger"
import { getdevicetypeapi } from "@/api/assetManage/DeviceType"
export default {
    data() {
        return {
            data: [],
            defaultProps: {},
            tableData: [],
            formInline: {
                pageIndex: 1,
                pageSize: 10,
                equipmentName: '',
                deviceTypeId: 0,
                startTime: '',
                endTime: ''
            },
            value: {
            },
            count: 0,
            dialogFormVisible: false,
            dialogLiShiVisible: false,
            dialogTableVisible: false,
            formLabelWidth: '120px',
            formData: {
            },
            options: []
        }
    },
    methods: {
        getequipmentledger() {
            getequipmentledgerapi(this.formInline).then(res => {
                this.tableData = res.data.data
                this.count = res.data.count
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.formInline.pageSize = val
            this.getequipmentledger()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.formInline.pageIndex = val
            this.getequipmentledger()
        },
        resetForm() {
            this.formInline.equipmentName = ''
            this.formInline.deviceTypeId = 0
            this.formInline.startTime = ''
            this.formInline.endTime = ''
        },
        handleSelectionChange(val) {

        },
        getdevicetype() {
            getdevicetypeapi().then(res => {
                this.data = res.data.data
            })
        },
        putequipmentstart(row) {
            this.dialogFormVisible = true
            this.formData = row
            getequipmentledgerinfoapi(row.id).then(res => {
                this.value = res.data
            })
        },
        putstart() {
            putequipmentledgerstartapi(this.value).then(res => {
                if (res.data.message == "操作成功") {
                    this.$message({
                        message: '维护登记成功',
                        type: 'success'
                    });
                    this.getequipmentledger()
                    this.dialogFormVisible = false
                }
                else {
                    this.$message({
                        message: '维护登记失败',
                        type: 'error'
                    });
                }
            })
        },
        ShowLiShi(row) {
            this.dialogLiShiVisible = true
            getequipmentledgerinfoapi(row.id).then(res => {
                this.value = res.data
            })
            this.options = []
            this.options.push(this.value)
        },
        ShowChaKan(row) {
            this.dialogLiShiVisible = true
            getequipmentledgerinfoapi(row.id).then(res => {
                this.value = res.data
            })
            this.options = []
            this.options.push(this.value)
        }
    },
    created() {
        this.getequipmentledger()
        this.getdevicetype()
    }
}
</script>
<style></style>